<template>
    <div style="width: 300px; height: 200px; position: relative">
        <div id="chart-container4" style="width: 300px; height: 200px"></div>
        <div class="posi">采集成功率</div>
    </div>
</template>

<script>
import * as echarts from "echarts"
import "echarts-gl"

export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            const chartDom = document.getElementById("chart-container4")
            const myChart = echarts.init(chartDom, null, {renderer: "webgl"})
            const option = {
                // title: {
                // 	text: "能耗分布",
                // 	left: "center",
                // },
                tooltip: {
                    trigger: "item"
                },
                series: [
                    {
                        type: "pie",
                        radius: ["40%", "90%"],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        data: [
                            {value: 133, name: "成功率XX1"},
                            {value: 56, name: "成功率XX4"}
                        ],
                        // label: {
                        //     show: true,
                        //     formatter: "{b}: {c}%"
                        // },
                        label: {
                            normal: {
                                show: true,
                                position: "inner",
                                formatter: "{d}%",
                                color: "#4c4a4a",
                                // position: "center",
                                // formatter: "采集率",
                                rich: {
                                    total: {
                                        fontSize: 35,
                                        fontFamily: "微软雅黑",
                                        color: "#454c5c"
                                    },
                                    active: {
                                        fontFamily: "微软雅黑",
                                        fontSize: 16,
                                        color: "#6c7a89",
                                        lineHeight: 30
                                    }
                                }
                            },
                            emphasis: {
                                //中间文字显示
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            },
                            tooltip: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                depth: 30 // 控制饼图厚度，实现3D效果
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style scoped>
.posi {
    position: absolute;
    top: 89px;
    left: 110px;
}
</style>
